<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端数据加载测试</title>
  </head>
  <body>
    <h1>前端数据加载测试</h1>
    <div id="results"></div>

    <script>
      async function testFrontendAPIs() {
        const resultsDiv = document.getElementById('results')

        try {
          console.log('🔄 开始测试前端API...')

          // 测试用户列表API
          const usersResponse = await fetch(
            '/api/users?page=1&limit=10&search='
          )
          console.log('👥 用户API响应状态:', usersResponse.status)
          const usersData = await usersResponse.json()
          console.log('👥 用户API数据:', usersData)

          // 测试统计API
          const statsResponse = await fetch('/api/users/stats')
          console.log('📊 统计API响应状态:', statsResponse.status)
          const statsData = await statsResponse.json()
          console.log('📊 统计API数据:', statsData)

          // 显示结果
          resultsDiv.innerHTML = `
                <h2>测试结果:</h2>
                <h3>用户API (${usersResponse.status})</h3>
                <pre>${JSON.stringify(usersData, null, 2)}</pre>
                
                <h3>统计API (${statsResponse.status})</h3>
                <pre>${JSON.stringify(statsData, null, 2)}</pre>
            `
        } catch (error) {
          console.error('❌ 前端API测试失败:', error)
          resultsDiv.innerHTML = `<p style="color: red;">错误: ${error.message}</p>`
        }
      }

      // 页面加载后自动测试
      testFrontendAPIs()
    </script>
  </body>
</html>
